<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 头部刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 粘性布局 -->
      <van-sticky>
        <van-nav-bar
          title="故障申报"
          left-text="返回"
          left-arrow
          @click-left="returnTo" />
        <!-- 标题 -->
      </van-sticky>
      <van-row style="margin-top: 3px; height: 30px; line-height: 30px">
        <van-col span="5">故障申报 </van-col>
        <van-col span="11"></van-col>
        <van-col
          style="color: aqua; font-weight: bold; font-size: 18px"
          span="8"></van-col>
      </van-row>

      <div style="background: #f6f6f6; height: 3px"></div>

      <van-row style="margin-top: 3px; height: 60px; line-height: 60px">
        <van-col span="5">故障申报 </van-col>
        <van-col span="11"></van-col>
        <van-col
          style="color: aqua; font-weight: bold; font-size: 18px"
          span="8"></van-col>
      </van-row>

      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="200"
        placeholder="请输入留言"
        show-word-limit />
      <!-- 图片上传 -->
      <van-row style="text-align: left; margin-left: 6px">
        <van-col span="24">
          <van-uploader 
            v-model="fileList"
            multiple
            :max-count="3"
            :after-read="afterRead"
            preview-size="90px"
            ref="file" />
        </van-col>
      </van-row>
      <div style="background: #f6f6f6; height: 3px"></div>
      <div style="height: 30px"></div>
      <van-radio-group
        v-model="radio"
        direction="horizontal"
        style="margin-left: 10px">
        <van-radio name="1">操作复杂</van-radio>
        <van-radio name="2">内容卡顿</van-radio>
        <van-radio name="3">App体验太差</van-radio>
      </van-radio-group>
      <div style="height: 30px"></div>
      <div style="background: #f6f6f6; height: 3px"></div>
      <van-row style="margin-top: 21px; text-align: left; margin-left: 9px">
        <van-col span="24">请留下您的联系方式 </van-col>
      </van-row>
      <van-field
        v-model="digit"
        required
        placeholder="请输入手机QQ号"
        type="digit" />

      <div style="background: #f6f6f6; height: 237px">
        <div style="height: 196px"></div>
        <van-goods-action-button
          color="#019FE8"
          type="danger"
          @click="addOrUpdate"
          style="margin-bottom: 0px"
          text="提交" />
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      radio: "",
      digit: "",
      fileList: [], //默认是一个空数组
      isShow: false,
      showList: false,
      message: "",
      isLoading: false, //刷新参数
      active: "search", //底部标签绑定
      form: { feedbackList: [], feedbackType:'', feedbackMsg:'', contact:''},
    };
  },
  created() {
    //生命周期  创建后要做的事情  vue被创建时候执行的
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    afterRead(file1) {
      // 此时可以自行将文件上传至服务器
      console.log(file1);
      //在这块创建FormData对象
      // FormData 对象的使用：
      // 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
      // 2. 异步上传二进制文件。
      //上传图片需要转换二进制这里要用到FormData
      const forms = new FormData();
      //这里的file1表示给后台传的属性名字，这里看接口文档需要传的的属性
      forms.append("file1", file1.file); // 获取上传图片信息
      //向后端发送相应的请求
      //这块的url是具体的交互接口
      //headers是上传图片需要用到的响应头，此处的token是后端那边给设置的，所以我请求的时候需要带上token，
      //token根据实际情况自行添加
      axios
        .post("/user/uploadFile", forms, {
          headers: {
            "content-type": "multipart/form-data",
            token: this.token,
          },
        })
        .then((res) => {
          //如果传入的响应状态码为200，则成功将文件发送给后台
          if (res.data.code === 200) {
            console.log(res);
            this.form.feedbackList .push(res.data.data.filePath);
            this.num += 1;
          } else {
            console.log(res.data.msg); //这块是请求失败后台给返回的相应的数据
          }
        });
    },
    //实现用户添加或者更新
    addOrUpdate() {      
      this.form.feedbackType = this.radio;
      this.form.feedbackMsg = this.message;
      this.form.contact = this.digit;
      var _this = this;
      this.$http
        .post("/feedbackInfo/add", this.form)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            _this.$message({
              message: "提交成功",
              type: "success",
            });
            //原始js重新请求
            location.reload();
          } else {
            _this.$message("操作失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    returnTo() {
      this.$router.go(-1);
    },

    //  方法事件处理
    //刷新方法
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        //调用请求
      }, 1000);
    },
    jump(uri) {
      this.$router.push(uri);
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>